<template>
    <n-spin :show="loading">
        <n-space vertical :size="12">
            <n-space justify="space-between">
                <n-space>
                    <n-form inline :model="param" :show-label="false" :show-feedback="false" ref="formRef">
                        <n-form-item>
                            <n-select
                                v-if="tree.length > 0"
                                v-model:value="param.query.bid"
                                placeholder="请选择品牌"
                                :style="{ width: '200px' }"
                                filterable
                                :options="tree"
                                children-field="corps"
                                value-field="id"
                                label-field="name"
                                clearable
                            />
                        </n-form-item>
                        <n-form-item>
                            <n-input v-model:value="param.query.name" :style="{ width: '200px' }" clearable placeholder="车型名称" />
                        </n-form-item>
                          <n-form-item>
                            <n-input v-model:value="param.query.sid" :style="{ width: '150px' }" clearable placeholder="车型ID" />
                        </n-form-item>
                        <n-form-item>
                            <n-select v-model:value="param.query.type" :style="{ width: '150px' }" clearable placeholder="车系类型" :options="typeOpts" />
                        </n-form-item>
                    </n-form>
                    <n-button @click="doQuery">
                        <template #icon>
                            <n-icon :component="YoutubeSearchedForRound" />
                        </template>
                        查询
                    </n-button>
                </n-space>
                <n-space>
                    <n-button @click="() => (brandActive = true)">
                        <template #icon>
                            <n-icon :component="SettingsRound" />
                        </template>
                        品牌设置
                    </n-button>
                    <n-button @click="() => (importActive = true)">
                        <template #icon>
                            <n-icon :component="Upload" />
                        </template>
                        批量导入
                    </n-button>
                </n-space>
            </n-space>
            <n-data-table
                striped
                size="large"
                type="selection"
                :checked-row-keys="srows"
                :max-height="height"
                :min-height="items.length > 0 ? height : 0"
                :row-key="(row:any) => row.id"
                @update:checked-row-keys="onCheckRow"
                :columns="columns"
                :data="items"
                :row-props="rowProps"
            />
            <n-space justify="end">
                <n-pagination show-size-picker :page="param.pager.page" :page-size="param.pager.size" :page-count="pager.all" :page-sizes="[10, 25, 50, 100]" @update:page="onChangePage" @update:page-size="onChangeSize">
                    <template #prefix="{}">当前 {{ pager.now }} / {{ pager.all }} 页，共 {{ pager.row }} 条数据</template>
                </n-pagination>
            </n-space>
        </n-space>

        <Import v-model:show="importActive" v-if="importActive"></Import>
        <View :item="data" v-model:show="viewActive" v-if="viewActive" @refresh="execLoad"></View>
        <Brand v-model:show="brandActive" v-if="brandActive" @refresh="doRefresh"></Brand>
    </n-spin>
</template>

<script lang="ts" setup>
import { h, ref, computed, onActivated } from 'vue'
import { NSpace, NIcon, NButton } from 'naive-ui'
import { YoutubeSearchedForRound, SettingsRound } from '@vicons/material'
import { Upload } from '@vicons/fa'

import { useStore } from '@/store'
import { Http } from '@/libs'

import Import from './Import.vue'
import View from './View.vue'
import Brand from './Brand.vue'

const store = useStore()

const loading = computed(() => store.state.loading.flag)

const height = computed(() => store.state.browser.innerHeight - 310)

const rowProps = (row: any) => {
    return {
        style: 'cursor: pointer;',
        onClick: () => {
            srows.value = []
            data.value = row
            viewActive.value = true
        },
    }
}

const columns = [
    {
        title: '名称',
        key: 'name',
        align: 'left',
        ellipsis: {
            tooltip: true,
        },
        render(row: any) {
            let comps: any[] = []
            comps[comps.length] = h(
                NButton,
                {
                    tertiary: true,
                    type: 'info',
                    style: { width: '80px', textAlign: 'center' },
                },
                { default: () => row.id }
            )
            comps[comps.length] = h('span', {}, { default: () => row.name })
            return h(NSpace, { wrap: false, align: 'center' }, { default: () => comps })
        },
    },
    {
        title: '车系类型',
        key: 'type',
        align: 'center',
        width: 150,
        ellipsis: {
            tooltip: true,
        },
        render(row: any) {
            let comps: any[] = []
            comps[comps.length] = h('span', {}, { default: () => row.type.name || '--' })
            return h(NSpace, { wrap: false }, { default: () => comps })
        },
    },
    {
        title: '品牌',
        key: 'brand',
        align: 'left',
        ellipsis: {
            tooltip: true,
        },
        render(row: any) {
            let comps: any[] = []
            comps[comps.length] = h('span', {}, { default: () => row.brand.name })
            comps[comps.length] = h('span', {}, { default: () => row.corp?.name })
            return h(NSpace, { wrap: false }, { default: () => comps })
        },
    },
    {
        title: '图片数量',
        key: 'count',
        align: 'right',
        width: 150,
        ellipsis: {
            tooltip: true,
        },
        render(row: any) {
            let comps: any[] = []
            comps[comps.length] = h('span', {}, { default: () => row.cover + ' 张图' })
            return h(NSpace, { wrap: false }, { default: () => comps })
        },
    },
    {
        title: '车辆数量',
        key: 'count',
        align: 'right',
        width: 150,
        ellipsis: {
            tooltip: true,
        },
        render(row: any) {
            let comps: any[] = []
            comps[comps.length] = h('span', {}, { default: () => row.count + ' 辆车' })
            return h(NSpace, { wrap: false }, { default: () => comps })
        },
    },
]

const srows = ref<string[]>([])

const onCheckRow = (keys: string[]) => {
    srows.value = keys
}

const onChangeSize = (size: number) => {
    param.value.pager.page = 1
    param.value.pager.size = size
    execLoad()
}

const onChangePage = (page: number) => {
    param.value.pager.page = page
    execLoad()
}

const param = ref({
    query: {
        name: '',
        sid: '',
        bid: undefined,
        type: undefined,
        rmd: false,
    },
    pager: {
        page: 1,
        size: 10,
        time: new Date().getTime(),
    },
})

const pager = ref({
    now: 1,
    row: 0,
    all: 0,
    fms: 0,
})
const items = ref([])

const doQuery = () => {
    param.value.pager.page = 1
    execLoad()
}
const typeOpts = ref<any[]>([])

const execLoadDict = () => {
    Http.post('/comm/data/dict', { key: 'serie_type' }).then(resp => {
        if (resp.stat.err > 0) {
            return
        }
        typeOpts.value = resp.data.items.map((item: any) => {
            return {
                label: item.name,
                value: item.val,
            }
        })
    })
}

const execLoad = () => {
    Http.post('/ops/sys/car/model/serie/list', param.value).then(resp => {
        if (resp.stat.err > 0) {
            return
        }
        if (resp.data.pager.now == 1) {
            param.value.pager.time = resp.data.pager.fms
        }
        srows.value = []
        pager.value = resp.data.pager
        items.value = resp.data.items
    })
}

const tree = ref<any>([])
const execLoadTree = () => {
    Http.post('/ops/sys/car/model/brand', {
        show: true,
        root: false,
    }).then(resp => {
        if (resp.stat.err > 0) {
            return
        }
        resp.data.items.forEach((e: any) => (e.type = 'group'))
        tree.value = resp.data.items
    })
}

const doRefresh = () => {
    execLoadTree()
    execLoad()
}

const importActive = ref(false)
const viewActive = ref(false)
const brandActive = ref(false)

const data = ref<any>({})

onActivated(() => {
    execLoad()
    execLoadTree()
    execLoadDict()
})
</script>
